<template>
  <!-- 
   vue2===>vue3变化 
   下面这些的作用都没变，只是写法上变了
   1：生命周期变了
   2：定义响应式数据变了
   3：父子传值的写法变了
   4：计算属性写法变了，
   5：watch侦听器写法也变了
   6：vuex变成了pinia   

 -->

  <div class="about">
    <h2>{{ num }}</h2>
    <button @click="btnClick">点击方法</button>
  </div>
</template>

<!-- // export default {
//   setup () {
//     // 早于beforeCreate,所以能不能用this(不能用this),vue3组合api不需要this,因为所有代码都写到setup
//     // 组合api中用setup替代了beforeCreate和created
//     // 除了setup以外生命周期，都需要导入再使用，都可以使用多次，js中也能使用生命周期
//     // 默认setup是要将html需要使用的数据return
//     const num = 1
//     // function btnClick(){}
//     const btnClick = () => {
//       console.log('btnClick')
//     }
//     return { num, btnClick }
//   }
// }
// -->

<script setup>
import { onMounted } from 'vue'
const num = 1
const btnClick = () => {
  console.log('btnClick')
}
onMounted(() => {
  console.log('onMounted')
})
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
